<!-- <template>
  <div>
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :before-upload="uploadFile"
      list-type="picture"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import Tiff from "tiff.js";
export default {
  methods: {
    uploadFile(file) {
      var _this = this;
      if (file.type !== "image/tiff") {
        return file;
      }
      return new Promise((resolve, reject) => {
        let arr = file.name.split(".");
        arr.pop();
        let name = arr.join("") + ".png";
        let fr = new FileReader();
        fr.onload = function(e) {
          try {
            var image = new Tiff({ buffer: e.target.result });
            file = _this.dataURLtoFile(image.toDataURL(), name);
            resolve(file);
          } catch (error) {
            echo(error);
            _this.$notify({
              title: error.name,
              type: "error",
              message: error.message
            });
            reject();
          }
        };
        fr.readAsArrayBuffer(file);
      });
    },

    /**
     * 将base64转换为文件
     * 此段代码来源于:https://www.cnblogs.com/fps2tao/p/9268613.html
     */
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    }
  }
};
</script> -->
<template>
	<div>
        <el-upload
            class="upload-demo"
            drag
            :on-change="handleChange"
            :file-list="fileList"
            list-type="picture"
            :auto-upload="false"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
    </div>
</template>
<script>
export default {
    data () {
		return {
			fileList: []
		}
	},
	methods: {
        handleChange(file, fileList) {
            let fr = new FileReader();
            let _file = file;
            fr.onloadend = function (e) {
                var Tiff = require('tiff.js');
                var image = new Tiff({ buffer: e.target.result });
                _file.url = image.toDataURL();
            }
            fr.readAsArrayBuffer(file.raw);
        }
    }
}
</script>

